import React, { Component } from 'react';
import {Row, Col, List, Tree, Button, message, Form, Input, Divider, Card, Popconfirm, Modal} from 'antd';
import {getRoleList,getResources,getFunsByRoleId,saveRelations,saveRole,removeRole} from "../api/Security";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {delFormFolder, getFormFolderTree} from "../api/formManagement";
export default class RoleList extends Component {
    state = {
        data: [],
        treeData:[],
        selectedRoleId:-1 ,//选中的角色id
        selectedRoleName:"" ,//选中的角色名称
        checkedKeys:[],  //选中的节点
        newRoleName:"",  //新增加的角色名
    }

    componentDidMount() {
        getRoleList().then(
            (res) => {
                //得到功能树列表
                getResources().then(
                    (res2)=>{
                        this.setState({
                            treeData:res2.data,
                            data: res.data
                        })
                    }
                )
            },
            (error) => {
                console.log("get role List failed!");
            }
        );
    }


    onSelect_Role=(item)=>{
        getFunsByRoleId(item.roleId).then(
            (res) => {
                this.setState({checkedKeys:res.data,selectedRoleName:item.roleName,selectedRoleId:item.roleId})
            },
            (error) => {
                console.log("get role List failed!");
            }
        );
       //  console.log(item);

    }


    removeRole=(item)=>{
        if(item.roleId==1 || item.roleId=="1" || item.roleId=="系统管理员"){
            message.info("系统管理员无法删除");
            return;
        }
        //查询后端  把后端数据组织到前端
        removeRole(item.roleId).then(
            (res) => {
                getRoleList().then(
                    (res) => {
                        //得到功能树列表
                        getResources().then(
                            (res2)=>{
                                this.setState({
                                    treeData:res2.data,
                                    data: res.data,
                                    newRoleName:""
                                })
                            }
                        )
                    },
                    (error) => {
                        console.log("get role List failed!");
                    }
                );
            },
            (error) => {
                console.log("get role List failed!");
            }
        );
    }
    // save
    saveRelations=()=>{
        let _roleId=this.state.selectedRoleId;
        let _checkedKeys=this.state.checkedKeys;
        saveRelations(_roleId,_checkedKeys).then(
            (res) => {
               message.success("保存成功")
            },
            (error) => {
                console.log("get role List failed!");
                message.fail("保存失败")
            }
        );
    }

     onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
    };

     onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys, info);
         this.setState({checkedKeys:checkedKeys.checked});
    };


     onFinish = (values) => {
        console.log('Success:', values);
         saveRole({"name":values.roleName}).then(
             (res) => {
                 getRoleList().then(
                     (res) => {
                         //得到功能树列表
                         getResources().then(
                             (res2)=>{
                                 this.setState({
                                     treeData:res2.data,
                                     data: res.data,
                                     newRoleName:""
                                 })
                             }
                         )
                     },
                     (error) => {
                         console.log("get role List failed!");
                     }
                 );


                message.success("新增加角色成功")
             },
             (error) => {
                 console.log("get role List failed!");
             }
         );


    };

     onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    render() {

        return (
            <>
                <Row>
                    <Col span={12}>
                            <List
                                // size="large"
                                itemLayout="horizontal"
                                header={<div>角色列表</div>}
                                // footer={<div>Footer</div>}
                                bordered
                                dataSource={this.state.data}

                                renderItem={item => <List.Item actions={[
                                    <Button onClick={()=>this.removeRole(item)} type="link" danger>删除</Button>,
                                    <Button onClick={()=>this.onSelect_Role(item)}  type="primary">选择</Button>
                                ]}>{item.roleName}</List.Item>}
                            />

                        <Card title="新增加角色" >

                            <Form
                                name="basic"
                                labelCol={{
                                    span: 8,
                                }}
                                wrapperCol={{
                                    span: 16,
                                }}
                                initialValues={{
                                    roleName: this.state.newRoleName,
                                }}
                                onFinish={this.onFinish}
                                onFinishFailed={this.onFinishFailed}
                                autoComplete="off"
                            >
                                <Form.Item
                                    label="角色名称"
                                    name="roleName"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your role name!',
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>




                                <Form.Item
                                    wrapperCol={{
                                        offset: 8,
                                        span: 16,
                                    }}
                                >
                                    <Button  htmlType="submit">
                                        保存
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Card>








                    </Col>
                    <Col  span={12}>


                        <Row justify="space-around">
                            <div>
                                <h3>
                                    选择的角色为：   {this.state.selectedRoleName}
                                </h3>
                            </div>
                            <Button  type="primary" onClick={this.saveRelations}>保存</Button>

                        </Row>


                        <Tree
                            checkable
                            checkStrictly={true}
                            checkedKeys={this.state.checkedKeys}
                            onSelect={this.onSelect}
                            onCheck={this.onCheck}
                            treeData={this.state.treeData}
                        />


                    </Col>


                </Row>



            </>



        )
    }
}
